<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField">
                  <a-select-option value="projectNo"> 项目编号 </a-select-option>
                  <a-select-option value="projectName"> 项目名称 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 78%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleShow" icon="search" style="margin-left: 30px"
                >高级查询</a-button>
              <a-button type="primary" @click="handlePostExportXls('项目成本汇总表')" icon="download" style="margin-left: 10px">导出</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">

            <a-col :span="8">
              <a-form-model-item label="项目状态">
                <a-select
                  v-model="queryParam.status"
                  show-search
                  placeholder="请选择项目状态"
                  option-filter-prop="children"
                  style="width: 100%"
                >
                  <a-select-option v-for="(item,i) in statusList" :value="item.value" :key="item.value">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目编号">
                <a-input v-model="queryParam.projectNo" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="承担部门">
                <a-input v-model="queryParam.memberDeptName" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="queryParam.projectName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input v-model="queryParam.projectManager" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="年份">
                <a-select
                  v-model="queryParam.year"
                  show-search
                  placeholder="请选择项目状态"
                  option-filter-prop="children"
                  style="width: 100%"
                >
                  <a-select-option v-for="(item,i) in yearList" :value="item.code" :key="item.code">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :scroll="{ x: true }"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="status" slot-scope="text, record">
        {{ initStatusText(record) }}
      </template>
        <template slot="projectNo" slot-scope="text, record">
          <span style="color: blue" @click="openProjectUrl(record)">{{ text }}</span>
        </template>
      </a-table>
    </div>
  </a-card>
</template>


<script>
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import {  getAction, postAction , downloadFileLink} from '@/api/manage'
import moment from 'moment'
export default {
  name: 'itAdjustmentList',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      description: '信息迭代版本报表',
      /* 勾选导出参数 */
      rowKey: 'id',
      busType: 'itAdjustmentList',
      columns: [
        {
          title: '项目状态',
          dataIndex: 'status',
          key: 'status',
          width: 90,
          align: 'center',
          scopedSlots: { customRender: 'status' },
        } ,
        {
          title: '项目编号',
          dataIndex: 'projectNo',
          key: 'projectNo',
          width: 90,
          align: 'center',
          scopedSlots: { customRender: 'projectNo' },
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          key: 'projectName',
          align: 'center',
          width: 90
        },
        {
          title: '等级',
          dataIndex: 'projectLevel',
          key: 'projectLevel',
          align: 'center',
          width: 60,
        },
        {
          title: '立项时间',
          dataIndex: 'createDate',
          key: 'createDate',
          align: 'center',
          width: 90,
        },
        {
          title: '项目经理',
          dataIndex: 'projectManager',
          key: 'mgTypeName',
          align: 'center',
          width: 90,
        },
        {
          title: '承担部门',
          dataIndex: 'memberDeptName',
          key: 'memberDeptName',
          align: 'center',
          width: 90,
        },
        {
          title: '项目总成本',
          dataIndex: 'manDays',
          key: 'manDays',
          align: 'center',
          width: 50,
        },
        {
          title: '专委成本',
          dataIndex: 'deptCost',
          key: 'deptCost',
          align: 'center',
          width: 50,
        },
        {
          title: '支出合计',
          dataIndex: 'total',
          key: 'total',
          align: 'center',
          width: 50,
        },
        {
          title: '1月',
          dataIndex: 'january',
          key: 'january',
          align: 'center',
          width: 50,
        },
        {
          title: '2月',
          dataIndex: 'february',
          key: 'february',
          align: 'center',
          width: 50,
        },
        {
          title: '3月',
          dataIndex: 'march',
          key: 'march',
          align: 'center',
          width: 50,
        },

        {
          title: '4月',
          dataIndex: 'april',
          key: 'april',
          align: 'center',
          width: 50,
        },
        {
          title: '5月',
          dataIndex: 'may',
          key: 'may',
          align: 'center',
          width: 50,
        },
        {
          title: '6月',
          dataIndex: 'june',
          key: 'june',
          align: 'center',
          width: 50,
        },
        {
          title: '7月',
          dataIndex: 'july',
          key: 'july',
          align: 'center',
          width: 50,
        },
        {
          title: '8月',
          dataIndex: 'august',
          key: 'august',
          align: 'center',
          width: 50,
        },
        {
          title: '9月',
          dataIndex: 'september',
          key: 'september',
          align: 'center',
          width: 50,
        },
        {
          title: '10月',
          dataIndex: 'october',
          key: 'october',
          align: 'center',
          width: 50,
        },
        {
          title: '11月',
          dataIndex: 'november',
          key: 'november',
          align: 'center',
          width: 50,
        },
        {
          title: '12月',
          dataIndex: 'december',
          key: 'december',
          align: 'center',
          width: 50,
        },
      ],
      exportLoading:false ,
      statusList:[
        {label:'创建中'  , value:'1'} ,
        {label:'待审批'  , value:'2'},
        {label:'待上会'  , value:'3'},
        {label:'执行中'  , value:'4'},
        {label:'待验收'  , value:'5'},
        {label:'结束'  , value:'6'},
        {label:'立项不成立'  , value:'7'},
      ],
      yearList:[] ,


      url: {
        list: '/projectBuildManday/getProjectCostSummary',
        getCodeInfoList:'/manage/codeInfo/queryByType',
        exportXlsUrl: '/projectBuildManday/peojectSumExport',
      },
      showSearchForm: false,
      keyword: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      queryParam: {
        searchField: '项目编号',
      },
      planStartDate:[],
      completeDate:[],
    }
  },
  mounted() {
    this.getDictList();
  },
  computed: {},
  methods: {
    getDictList(){
      const vm=this;
      getAction(this.url.getCodeInfoList,{type:"年份查找参数"}).then(res=>{
        debugger
        this.yearList = res.result||[];
      })
    },
    initStatusText(record) {
      if (record.status == '1') {
        return '创建中'
      }
      if (record.status == '2' )
      {
        return '待审批'
      }
      if (record.status == '3'){
        return '待上会'
      }
      if (record.status == '4'){
        return '执行中'
      }
      if (record.status == '5'){
        return '待验收'
      }
      if (record.status == '6'){
        return '结束'
      }
      if (record.status == '7'){
        return '立项不成立'
      }
    },
    handleShow() {
      this.getDictList();
      this.showSearchForm = true;
    } ,
    formatDate(date) {
      return date ? moment(date).format('YYYY-MM-DD') : ''
    },
    openProjectUrl(record) {
      console.log('项目id'  , record)
      let urlJump = this.$router.resolve({ path:`/approval?projectBuildId=` + record.id})
      window.open(urlJump.href, '_blank')
    },
    handleToSearch() {
      this.showSearchForm = false
      this.searchQuery()
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.searchField = '项目编号'
      this.queryParam.timeFlag = '1'
      this.queryParam.startOneTime = null
      this.queryParam.startTweTime = null
      this.queryParam.completeOneTime = null
      this.queryParam.completetTwoTime = null
      this.planStartDate = undefined
      this.completeDate = undefined
      this.handleToSearch()
    },
    handleSearchTime(time) {
      if (this.tableLoading) {
        return
      }
      this.queryParam.timeFlag = time
      this.handleToSearch()
    },
    showLength(item, len) {
      if (!item || item.length <= len) {
        return item
      }
      return item.substring(0, len) + '...'
    },
    startChange(date ,dateString) {
      console.log(dateString)
      if (dateString && dateString.length > 0) {
        this.queryParam.startOneTime = dateString[0]
        this.queryParam.startTweTime = dateString[0]
      }
    },
    completeChange(date ,dateString) {
      console.log(dateString)
      if (dateString && dateString.length > 0) {
        this.queryParam.completeOneTime = dateString[0]
        this.queryParam.completetTwoTime = dateString[0]
      }
    }
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
/deep/ .ant-form-item-label{
  background: white;
}
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
</style>